<template>
  <Popup
      :round="round"
      v-model="visible"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      @click-overlay="handleClose"
      :safe-area-inset-bottom="true"
      :close-on-click-overlay="false"
  >
    <div class="report-result">
      <div class="info-area">
        <div class="sign dialog-header">
          报到
        </div>
        <div class="content dialog-content">
          在非预约时间段内报到是否放弃预约优先权?
        </div>
      </div>

      <div class="operate-area">
        <Button class="cancel" @click="handleClose">
          取消&nbsp;{{ `${time / 1000}` }}s
        </Button>
        <Button class="sure" @click="handleSure">
          确定
        </Button>
      </div>
    </div>
  </Popup>
</template>

<script>
import {Popup,Button} from 'vant';
import {v4 as uuid} from "uuid";

export default {
  name: 'ReportSurePower',

  componentName: "ReportSurePower",

  props: {
    visible: {
      type: Boolean,
      required: true
    },
    info: {
      type: Object,
      required: true
    },
  },

  components: {
    Popup,
    Button
  },

  data() {
    return {
      time: 60000,
      round: true,
    }
  },

  computed: {

  },

  mounted() {
    console.log('init')
  },

  methods: {
    handleClose() {
      this.$emit('handle-cancel')
      this.$emit('handleCancel')
    },

    handleSure(){
      this.$emit('handle-sure')
      this.$emit('handleSure')
    }
  },


  watch: {
    visible: {
      handler: function (val) {
        const self = this;
        let {time} = this.info;
        self.widgetKey = uuid();
        if (val) {
          self.time = time * 1000;
          self.timer = setInterval(() => {
            self.time = (self.time - 1000);
            if ((self.time) === 0) {
              self.handleClose(true);
              clearInterval(self.timer)
            }
          }, 1000);
        } else {
          clearInterval(self.timer);
        }
      },
      deep: true,
      immediate: true
    },
  },
}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
